<template>
    <div>
        <div class="search">
            <input v-model="keyword" class="seacch-input" type="text" placeholder="输入城市名或拼音" />
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li v-for="item of list" class="search-item border-bottom"
                     :key="item.id" 
                     @click="handleCityClick(item.name)">
                     {{item.name}} 
                </li>
                <li class="search-item border-bottom"  v-show="hasNoData">没有相关的城市</li>
            </ul>
        </div>
    </div>
</template>

<script>
import Bscroll  from 'better-scroll' 
import {mapState,mapMutations} from 'vuex'
export default{
    name: 'CitySearch',
    props: {
        cities: Object
    },
    computed: {
        hasNoData () {
            return ! this.list.length
        }
    },
    data () {
        return {
            keyword: '',
            list: [],
            timer: null
        }
    },
    watch: {
        keyword () {
            if(this.timer){
                clearTimeout(this.timer)
            }
            if(!this.keyword){
                this.list= []
                return 
            }
            this.timer = setTimeout( () => {
                const result= []
                for(let i in this.cities){
                    this.cities[i].forEach ((value) => {
                        //假如检索到关键字，就把他添加进去
                        if(value.spell.indexOf(this.keyword) > -1 || 
                            value.name.indexOf(this.keyword) > -1) {
                            result.push(value)
                        }
                    })
                }
                    this.list= result
            },100)
        }
    },
    mounted () {
        this.scroll = new Bscroll(this.$refs.search)
    },
    methods: {
        handleCityClick(name){
            // this.$store.dispatch('changeCity',name);
            // 利用js实现路由跳转
            this.$router.push('/');
            //也可以跳过actions直接修改
            // this.$store.commit('changeCity',name)
            this.changeCity(name)
        },
        //替换 this.$store.commit('changeCity',name)
        ...mapMutations(['changeCity'])
    }
}  
</script>

<style lang="stylus" scoped>
    @import  '~styles/varibles.styl'
    .search
        height: .72rem 
        padding: 0 .1rem 
        background: $bgColor
        .seacch-input
            //修改错位padding
            box-sizing: border-box
            width: 100%
            height: .62rem 
            padding: 0 .1rem
            line-height: .62rem 
            text-align: center 
            border-radius: .06rem 
            color: #666
    .search-content
        z-index: 1
        overflow: hidden
        position: absolute
        top: 1.58rem 
        left: 0
        right: 0
        bottom: 0
        background: #eee
        .search-item
            line-height: .62rem 
            padding-left: .2rem 
            background: #fff
            color: #666
</style>